<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="nav-back" @click="goBack">
                <text class="iconfont icon-back"></text>
            </view>
            <view class="nav-title">公告详情</view>
        </view>
        
        <!-- 公告内容区 -->
        <view class="notice-content">
            <!-- 公告标题 -->
            <view class="notice-title">
                {{ noticeDetail.title }}
            </view>
            
            <!-- 公告信息 -->
            <view class="notice-info">
                <text class="notice-type" :class="noticeDetail.type === 1 ? 'type-important' : noticeDetail.type === 2 ? 'type-activity' : 'type-system'">
                    {{ noticeDetail.typeText }}
                </text>
                <text class="notice-time">{{ noticeDetail.time }}</text>
                <text class="notice-source">{{ noticeDetail.source }}</text>
            </view>
            
            <!-- 分割线 -->
            <view class="divider"></view>
            
            <!-- 公告正文 -->
            <view class="notice-body" v-html="noticeDetail.content">
                <!-- 正文内容会通过v-html渲染 -->
            </view>
            
            <!-- 附件区域 -->
            <view class="attachments" v-if="noticeDetail.attachments && noticeDetail.attachments.length > 0">
                <view class="attach-title">附件：</view>
                <view class="attach-item" v-for="(attach, index) in noticeDetail.attachments" :key="index" @click="downloadAttach(attach)">
                    <text class="iconfont icon-file"></text>
                    <text class="attach-name">{{ attach.name }}</text>
                    <text class="attach-size">{{ attach.size }}</text>
                </view>
            </view>
        </view>
        
        <!-- 底部操作区 -->
        <view class="footer">
            <view class="btn-share" @click="shareNotice">
                <text class="iconfont icon-share"></text>
                <text>分享</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            noticeDetail: {
                id: 0,
                title: '',
                type: 1,
                typeText: '重要通知',
                time: '',
                source: '',
                content: '',
                attachments: []
            }
        }
    },
    onLoad(options) {
        // 获取传递过来的公告ID
        const id = options.id;
        // 获取公告详情
        this.getNoticeDetail(id);
    },
    methods: {
        // 获取公告详情
        getNoticeDetail(id) {
            // 模拟请求数据
            setTimeout(() => {
                // 生成模拟详情数据
                this.noticeDetail = this.generateMockDetail(id);
            }, 500);
        },
        
        // 生成模拟详情数据
        generateMockDetail(id) {
            const types = [
                { id: 1, name: '重要通知', className: 'type-important' },
                { id: 2, name: '活动公告', className: 'type-activity' },
                { id: 3, name: '系统通知', className: 'type-system' }
            ];
            
            // 随机选择一种类型
            const type = types[Math.floor(Math.random() * types.length)];
            
            // 模拟富文本内容
            const content = `
                <p>尊敬的用户：</p>
                <p>为了提升系统性能和服务质量，我们将于近期进行系统升级维护，现将相关事宜通知如下：</p>
                <p style="text-indent: 2em;">1. 升级时间：2025年7月1日 00:00-06:00</p>
                <p style="text-indent: 2em;">2. 影响范围：系统将暂停服务，期间无法访问和使用各项功能</p>
                <p style="text-indent: 2em;">3. 注意事项：请您在升级前完成重要操作，避免数据丢失</p>
                <p>升级完成后，我们将为您提供更稳定、更高效的服务。感谢您的理解与支持！</p>
                <p style="text-align: right;">${['系统管理员', '运营团队', '技术支持'][Math.floor(Math.random() * 3)]}</p>
                <p style="text-align: right;">2025年6月28日</p>
            `;
            
            // 随机生成附件
            const attachments = [];
            const hasAttach = Math.random() > 0.5;
            if (hasAttach) {
                const attachCount = Math.floor(Math.random() * 3) + 1;
                for (let i = 0; i < attachCount; i++) {
                    const fileTypes = ['doc', 'pdf', 'jpg', 'png', 'xlsx'];
                    const fileType = fileTypes[Math.floor(Math.random() * fileTypes.length)];
                    const size = (Math.random() * 10 + 1).toFixed(2);
                    
                    attachments.push({
                        id: i + 1,
                        name: `附件${i + 1}.${fileType}`,
                        size: `${size}MB`,
                        url: `https://example.com/attach/${id}/${i + 1}`
                    });
                }
            }
            
            return {
                id: id,
                title: `这是一条${type.name}：关于系统升级维护的通知${id}`,
                type: type.id,
                typeText: type.name,
                time: '2025-06-28',
                source: ['系统管理员', '运营团队', '技术支持'][Math.floor(Math.random() * 3)],
                content: content,
                attachments: attachments
            };
        },
        
        // 返回上一页
        goBack() {
            uni.navigateBack();
        },
        
        // 下载附件
        downloadAttach(attach) {
            uni.showToast({
                title: `准备下载：${attach.name}`,
                icon: 'none'
            });
            
            // 实际项目中可以使用 uni.downloadFile 进行文件下载
            /*
            uni.downloadFile({
                url: attach.url,
                success: (res) => {
                    if (res.statusCode === 200) {
                        uni.saveFile({
                            tempFilePath: res.tempFilePath,
                            success: (saveRes) => {
                                uni.showToast({
                                    title: '下载成功',
                                    icon: 'success'
                                });
                            }
                        });
                    }
                }
            });
            */
        },
        
        // 分享公告
        shareNotice() {
            uni.showActionSheet({
                itemList: ['微信好友', '朋友圈', '复制链接'],
                success: (res) => {
                    const itemIndex = res.tapIndex;
                    if (itemIndex === 0) {
                        uni.showToast({
                            title: '已分享到微信好友',
                            icon: 'none'
                        });
                    } else if (itemIndex === 1) {
                        uni.showToast({
                            title: '已分享到朋友圈',
                            icon: 'none'
                        });
                    } else if (itemIndex === 2) {
                        uni.setClipboardData({
                            data: `https://example.com/notice/${this.noticeDetail.id}`,
                            success: () => {
                                uni.showToast({
                                    title: '链接已复制',
                                    icon: 'success'
                                });
                            }
                        });
                    }
                }
            });
        }
    }
}
</script>

<style>
.container {
    background-color: #FFFFFF;
    min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
    height: 44px;
    background-color: #007AFF;
    display: flex;
    align-items: center;
    position: relative;
}

.nav-back {
    position: absolute;
    left: 15px;
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-back .iconfont {
    color: #FFFFFF;
    font-size: 18px;
}

.nav-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    margin: 0 auto;
}

/* 公告内容样式 */
.notice-content {
    padding: 15px;
}

.notice-title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 12px;
}

.notice-info {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999999;
    margin-bottom: 12px;
}

.notice-type {
    padding: 0 5px;
    height: 18px;
    line-height: 18px;
    border-radius: 3px;
    margin-right: 10px;
    font-size: 12px;
}

.type-important {
    background-color: #FFEBEB;
    color: #F56C6C;
}

.type-activity {
    background-color: #FFF6E0;
    color: #FF9800;
}

.type-system {
    background-color: #E8F3FF;
    color: #409EFF;
}

.notice-time {
    margin-right: 15px;
}

.divider {
    height: 1px;
    background-color: #eeeeee;
    margin: 15px 0;
}

.notice-body {
    font-size: 16px;
    color: #333333;
    line-height: 1.8;
}

.notice-body p {
    margin-bottom: 15px;
}

/* 附件样式 */
.attachments {
    margin-top: 20px;
}

.attach-title {
    font-size: 15px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 10px;
}

.attach-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}

.attach-item .iconfont {
    color: #409EFF;
    font-size: 18px;
    margin-right: 8px;
}

.attach-name {
    flex: 1;
    font-size: 15px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attach-size {
    font-size: 13px;
    color: #999999;
}

/* 底部操作区样式 */
.footer {
    padding: 15px;
    border-top: 1px solid #eeeeee;
    display: flex;
    justify-content: flex-end;
}

.btn-share {
    display: flex;
    align-items: center;
    color: #007AFF;
    font-size: 15px;
}

.btn-share .iconfont {
    margin-right: 5px;
    font-size: 16px;
}
</style>
    